<template>
    <div>
        <el-button style="float: left;"  type="primary"  @click="addFormVisible = true">添加</el-button>
        <el-form :model="receptionQuery">
            <el-button style="float: right" icon="el-icon-lx-search" type="primary"  @click="selectPatient"></el-button>
            <el-input type="text" v-model="receptionQuery.name" placeholder="请输入姓名查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.phone" placeholder="请输入电话查询" style="float: right;width: 200px"></el-input>
            <el-input type="text" v-model="receptionQuery.idCard" placeholder="请输入身份证查询" style="float: right;width: 200px"></el-input>
            <el-button style="float: right" type="primary"  @click="clearselect">清空</el-button>
        </el-form>
        <el-table
                :data="Patients.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        >
            <el-table-column
                    label="用户id"
                    prop="id"
                    align="center"
                    width="200"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="name"
                    width="80"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="性别"
                    align="center"
                    width="80"
            >
                <template #default="scope">
                    <p v-if="scope.row.sex=='1'">男</p>
                    <p v-if="scope.row.sex=='2'">女</p>
                </template>
            </el-table-column>
            <el-table-column
                label="年龄"
                prop="age"
                align="center"
                width="80"
            >
        </el-table-column>
            <el-table-column
                    label="身份证号"
                    prop="idcard"
                    align="center"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    label="电话号码"
                    prop="phone"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    label="地址"
                    align="center"
                    prop="address" width="220">
            </el-table-column>
            <el-table-column label="操作" width="250 " align="center">

                <template #default="scope">
                    <el-button type="text" icon="el-icon-lx-text" @click="handleEdit(scope.$index, scope.row)">修改
                    </el-button>
                    <el-button type="text" icon="el-icon-delete" style="color: red"
                               @click="handledelete(scope.$index, scope.row)">删除</el-button>
                    <el-button type="text" icon="el-icon-refresh" style="color: #00ff19"
                               @click="handlerefresh(scope.$index, scope.row)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="Patients.length"
            >
            </el-pagination>
        </center>

        <el-dialog   v-model="addFormVisible"  width="420px" >
            <el-form ref="AddForm" :model="addPatient" :rules="rules">
                <h3 style="text-align: center">添加用户</h3>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="addPatient.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="addPatient.sex">
                        <el-radio :label="1" style="margin-left: 50px">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="addPatient.age" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idcard">
                    <el-input v-model="addPatient.idcard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="addPatient.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="addPatient.address" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="addPatient.password" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="passwords">
                    <el-input type="password" v-model="addPatient.passwords" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="SubmitAddForm('AddForm')">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="deleteFormVisible" width="420px" >
            <center><h3>确认删除{{Patient.name}}?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="deleteFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="Deletepatient">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="refreshFormVisible" width="420px" >
            <center><h3>确认重置{{Patient.name}}的密码?<br><br></h3></center>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="refreshFormVisible= false">取 消</el-button>
                    <el-button type="primary" @click="OnSubmitrefresh">确 定</el-button></center>
            </div>
        </el-dialog>
        <el-dialog   v-model="dialogFormVisible" width="420px" >
            <el-form ref="EidtForm" :model="Patient" :rules="rules">
                <el-form-item label="用户id" >
                    <el-input v-model="Patient.id" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="Patient.name" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="Patient.sex">
                        <el-radio :label="1" style="margin-left: 50px">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                    <el-form-item label="年龄" prop="age">
                <el-input v-model="Patient.age" autocomplete="off" style="width: 300px;float: right" ></el-input>
            </el-form-item>
                <el-form-item label="身份证号" prop="idcard">
                    <el-input v-model="Patient.idcard" autocomplete="off" style="width: 300px;float: right"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model="Patient.phone" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address" >
                    <el-input v-model="Patient.address" autocomplete="off" style="width: 300px;float: right" ></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer"  class="dialog-footer">
                <center><el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="SubmitEditForm('EidtForm')">确 定</el-button></center>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios";
    import {ElMessage} from "element-plus";

    export default {
        name: "MPatientList",
        data(){
            var isNum = (rule, value, callback) => {
                const age= /^[0-9]*$/
                if (!age.test(value)) {
                    callback(new Error('年龄只能为数字'))
                }else{
                    callback()
                }
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.user.passwords!== '') {
                    //     this.$refs.user.validateField('passwords');
                    // }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addPatient.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return{
                Patients: [{
                    id: "",
                    idcard: "",
                    name: "",
                    phone: "",
                    password: "",
                    sex: 0,
                    age: 0,
                    loginName: "",
                    address: "",
                    deleted: 0,
                    gmtCreate: null,
                    gmtUpdate: null
                }],
                receptionQuery:{
                    idCard: "",
                    name: "",
                    phone: ""
                },
                currentPage:1, //初始页
                pagesize:9,    //    每页的数据
                type:'',
                search:'',
                refreshFormVisible:false,
                dialogFormVisible:false,
                addFormVisible:false,
                deleteFormVisible:false,
                Patient: {
                    id: '',
                    name: '',
                    sex:'',
                    age:'',
                    phone:'',
                    idcard:'',
                    address: '',
                    login_name:'',
                    password:''
                },
                addPatient: {
                    id: '',
                    name: '',
                    sex:'',
                    age:'',
                    phone:'',
                    idcard:'',
                    address: '',
                    login_name:'',
                },
                rules:{
                    name:[
                        {required:true,message:"账号不可为空",trigger:'blur'}
                    ],
                    sex:[
                        {required:true,message:"性别不可为空",trigger:'blur'}
                    ],
                    age:[
                        {required:true,message:"年龄不可为空",trigger:'blur'},
                        { validator: isNum, trigger: 'blur' }
                    ],
                    idcard: [
                        {required:true,message:"身份证不可为空",trigger:'blur'},
                        { min: 18, max: 18, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    phone:[
                        {required:true,message:"电话不可为空",trigger:'blur'},
                        { min: 11, max: 11, message: '请正确输入身份证号', trigger: 'blur' },
                    ],
                    login_name:[
                        {required:true,message:"登录昵称不可为空",trigger:'blur'}
                    ],
                    address:[
                        {required:true,message:"登录昵称不可为空",trigger:'blur'}
                    ],
                    password: [
                        {required:true,message:"密码不可为空",trigger:'blur'},
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwords: [
                        {required:true,message:"第二次密码不可为空",trigger:'blur'},
                        { validator: validatePass2, trigger: 'blur' }
                    ],

                },
            }
        },
        created(){
          this.create();
        },

        activated(){
            this.create();
        },
        methods: {
            create(){
                axios.get("http://119.29.60.153:8001/doctorservice/patient-info/getAllPatient").then(resp=> {
                    this.Patients = resp.data.data.list;
                    this.Patients.reverse();
                })
            },

            SubmitEditForm(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/patient-info/updatePatient",this.Patient).then(resp=> {

                            if(resp.data.success==true){
                                ElMessage.success("修改成功!");
                                this.dialogFormVisible=false;
                                this.create();
                            }
                            else {
                                ElMessage.error("修改失败!");
                                this.dialogFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })
            },

            SubmitAddForm(formName){
                this.$refs[formName].validate((valid)=>{
                    if(valid){
                        axios.post("http://119.29.60.153:8001/doctorservice/registration/addPatientByReception",this.addPatient).then(resp=> {
                            if(resp.data.success==true){
                                if(resp.data.message=='该手机号已存在！')
                                {
                                    ElMessage.error(resp.data.message);
                                }

                                else {
                                    ElMessage.success("添加成功!");
                                    this.addPatient={};
                                    this.addFormVisible=false;
                                    this.create();
                                }

                            }
                            else {
                                ElMessage.error("添加失败!");
                                this.addFormVisible=false;

                            }
                        })
                    }else {
                        return false;
                    }
                })
            },

            selectPatient(){
                axios.post("http://119.29.60.153:8001/doctorservice/patient-info/getPatients",this.receptionQuery).then(resp=> {
                    this.Patients=resp.data.data.list;
                })
            },

            clearselect(){
                this.receptionQuery={};
            },
            Deletepatient(){
                axios.delete("http://119.29.60.153:8001/doctorservice/patient-info/deletePatient?id="+this.Patient.id).then(resp=> {
                    if(resp.data.success==true){
                        ElMessage.success('删除成功');
                        this.deleteFormVisible = false;
                        this.create();
                    }
                    else ElMessage.error('删除失败');
                })
            },

            OnSubmitrefresh(){
                axios.post("http://119.29.60.153:8001/doctorservice/patient-info/updatePatient",this.Patient).then(resp=> {

                    if(resp.data.success==true){
                        ElMessage.success("重置密码成功!");
                        this.refreshFormVisible=false;
                        this.create();
                    }
                    else {
                        ElMessage.error("修改失败!");
                        this.dialogFormVisible=false;

                    }
                })
            },

            handleSizeChange: function (size) {
                this.pagesize = size;
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
            },

            handleEdit(index,row){
                this.Patient= row;
                this.dialogFormVisible = true;
            },
            handlerefresh(index,row){
                this.Patient= row;
                this.Patient.password='123';
                this.refreshFormVisible = true;
            },
            handledelete(index,row){
                this.Patient= row;
                this.deleteFormVisible = true;
            }
        },
    }
</script>

<style scoped>

</style>